.step {
    --step-border-width: #{$step-border-width};
    --step-border: #{$step-border};
    --step-item-color: #{$step-item-color};
    --step-item-header-height: #{$step-item-header-height};
    --step-item-text-height: #{$step-item-text-height};
    --step-item-text-width: #{$step-item-text-width};
    --step-item-line-height: #{$step-item-line-height};
    --step-item-line-bg: #{$step-item-line-bg};
    --step-item-line-transition: #{$step-item-line-transition};
    --step-item-line-vertical-transition: #{$step-item-line-vertical-transition};
    --step-item-line-width: #{$step-item-line-width};
    --step-item-line-progress-bg: #{$step-item-line-progress-bg};
    --step-vertical-min-height: #{$step-vertical-min-height};

    &.step-vertical {
        display: flex;
        flex-direction: row;
        min-height: var(--step-vertical-min-height);

        .step-header {
            display: flex;
            flex-direction: column;

            .step-item {
                display: flex;
                flex-direction: row;

                .step-item-header {
                    flex-direction: column;
                    height: initial;

                    .step-line {
                        width: var(--step-item-line-height);
                        margin: .5rem 0;

                        &:after {
                            width: var(--step-item-line-height);
                            height: var(--step-item-line-width);
                            transition: var(--step-item-line-vertical-transition);
                        }
                    }
                }

                .step-item-content {
                    display: flex;
                    flex-direction: column;
                    margin-left: .5rem;

                    .step-desc {
                        min-width: 70px;
                    }
                }
            }
        }

        .step-body {
            flex: 1;
            margin-left: .5rem;
        }
    }

    .step-header {
        display: flex;

        .step-item {
            color: var(--step-item-color);

            &.active {
                --step-item-color: var(--bs-body-color);
            }

            &.is-done {
                --step-item-color: var(--bs-success);
                --step-item-line-width: 100%;
            }

            &:not(:last-child) {
                flex: 1;
            }
        }

        .step-item-header {
            position: relative;
            display: flex;
            align-items: center;
            height: var(--step-item-header-height);

            .step-text {
                white-space: nowrap;
            }

            .step-title {
                border-radius: 50%;
                border: var(--step-border);
                font-weight: 700;
                height: var(--step-item-text-height);
                width: var(--step-item-text-width);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .step-line {
                background-color: var(--step-item-line-bg);
                height: var(--step-item-line-height);
                flex: 1;
                margin: 0 .5rem;

                &:after {
                    content: "";
                    transition: var(--step-item-line-transition);
                    display: block;
                    height: var(--step-item-line-height);
                    width: var(--step-item-line-width);
                    background-color: var(--step-item-line-progress-bg)
                }
            }
        }

        .step-item-content {
            .step-desc {
                font-size: .75rem;
                line-height: 1.25rem;
            }
        }
    }

    .step-body {
        .step-body-item {
            &:not(.active) {
                display: none;
            }
        }
    }
}
